import { getRotateConfigListsHistory } from "@/api/rotate-config-page"
import { Modal, Pagination, Space, Table } from "antd"
import { FC, forwardRef, useEffect, useImperativeHandle, useState } from "react"
import "./index.less"
import moment from "moment"

interface OnHistoryProps { }

export interface IHistoryModelRef {
  openHistory: (record) => void
}

const OnHistory = (props, ref) => {
  const [isOpen, setIsOpen] = useState(false)
  const [tableData, setTableData] = useState<any>()
  const [factory, setFactory] = useState<string>('')
  const [productLine, setProductLine] = useState<string>('')
  const [pageNum, setPageNum] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(5)
  const [total, setTotal] = useState<number>(0)

  const columns = [
    {
      title: '时间', dataIndex: 'genTime', key: 'genTime', width: 90, render: (_, record) => (
        <div>
          {moment(record.genTime).format("YYYY-MM-DD HH:mm:ss")}
        </div>

      )
    },
    {
      title: '旋转配置', dataIndex: 'rotateConfig', key: 'rotateConfig', width: 280, render: (_, record) => (
        <strong>
          {(record.isReverse ? "" : "无") + "翻转 顺时针旋转" + record.angle + "度 X偏移值（mm）:" + record.offsetX + " Y偏移值（mm）:" + record.offsetY}
        </strong>
      )
    },
    { title: '备注', dataIndex: 'desc', key: 'desc', width: 90 }
  ]

  useEffect(() => {
    (async () => {
      if (isOpen) {
        const res = await getRotateConfigListsHistory({ factory, productLine, pageNum, pageSize })
        setTableData(res.data.list)
        setTotal(res.data.total)
      }
    })()
  }, [pageNum, factory, productLine, isOpen])

  const openHistory = async (record) => {
    setIsOpen(true);
    setFactory(record.factory)
    setProductLine(record.productLine)
    setPageNum(1)
  };

  const closeModel = () => {
    setIsOpen(false)
  }
  useImperativeHandle(ref, () => ({
    openHistory
  }))

  return (
    <div>
      <Modal title="历史记录" className="history_dialog" open={isOpen} onCancel={closeModel} footer={null} width={900}>
        <Table
          rowKey={'uid'}
          className="configTable"
          columns={columns}
          bordered={true}
          dataSource={tableData}
          // scroll={{ y: 700 }}
          pagination={false}
        />
        <Pagination
          className="papgation"
          showSizeChanger={false}
          current={pageNum}
          total={total}
          onChange={page => setPageNum(page)}
          showTotal={() => `总数:${total}`}
          pageSize={pageSize}
        />
      </Modal>
    </div>
  )
}

export default forwardRef<IHistoryModelRef, OnHistoryProps>(OnHistory)